<template>
    <div class="container">
        <div class="public-filter">
            <div style="display: flex">
                <custom-filter @onSubmit="handleInitTable" @onReset="handleResetTable" hideEnabled></custom-filter>
            </div>
            <div>
                <a-button @click="goBack">返回</a-button>
            </div>
        </div>
        <div class="container-data merchant-box">
            <a-table
                :columns="columns"
                :data-source="dataSource"
                :row-key="setRowKey"
                :pagination="pagination"
                :loading="loading"
                class="dept-data__table-table"
                :rowClassName="(record) => (record.status == '2' ? 'table-striped' : null)"
            >
                <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                    <span>{{ t(`yl.${item.slotName}`) }}</span>
                </template>
            </a-table>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, createVNode, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { PaginationQuery } from '@/types/table';
import {
    MenuOutlined,
    UnlockOutlined,
    ReloadOutlined,
    ImportOutlined,
    HistoryOutlined,
    LockOutlined,
} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import ylMultiButton from '@/components/ylMultiButton.vue';
import customFilter from './components/tableFilter.vue';

import { deleteEmptyKey } from '@/utils/help';
import columns from './dataColumns';
import useTables from './dataTables';

export default defineComponent({
    name: 'department',
    components: {
        customFilter,
        ylMultiButton,
        MenuOutlined,
        UnlockOutlined,
        ReloadOutlined,
        ImportOutlined,
        HistoryOutlined,
        LockOutlined,
    },
    props: {
        logType: {
            type: String,
            default: () => '商户',
        },
        timeShow: {
            type: Boolean,
            default: () => false,
        },
    },
    setup(props, { emit }) {
        const { t } = useI18n();

        // 搜索条件
        let { tableQuery, getMerchantPageDataData, selectedRow, selectedRowKeys, visible, countryRegionList } = useTables;
        const state = reactive({
            title: t('yl.addSuccess'),
            confirmLoading: false, // 弹窗按钮的loading
        });
        // 设置table row key
        const setRowKey = (record: { [x: string]: any }) => record.id;

        onMounted(() => {
            getMerchantPageDataData(tableQuery);
        });
        // 搜索
        const handleInitTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery.page = 0;
            console.log(query);
            tableQuery = Object.assign({}, tableQuery, { ...query });
            getMerchantPageDataData(tableQuery);
        };
        // 重置
        const handleResetTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery = Object.assign({}, tableQuery, { ...query });
            tableQuery.page = 0;
            selectedRowKeys.value = [];
            getMerchantPageDataData(tableQuery);
        };

        const goBack = () => {
            emit('goBack', state);
        };

        return {
            ...toRefs(state),
            goBack,
            t,
            setRowKey,
            columns,
            ...useTables,
            handleInitTable,
            handleResetTable,
        };
    },
});
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    &-filter {
        @include flex;
        &-item {
            margin-right: 20px;
        }
    }
    &-data {
        padding: $width20 $width0;
        .multi-action {
            background: $white;
        }
        .action-btn + .action-btn {
            margin-left: $width8;
        }
    }
}
</style>
<style>
.merchant-box .table-striped td {
    background-color: #fafafa;
}
</style>
